<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="utf-8">
	<title>集团中心</title>
	<!--    <meta http-equiv="X-UA-Compatible" content="IE=Edge">-->
	<!--    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">-->


	<script src="//api.map.baidu.com/api?v=1.0&type=webgl&ak=CKHzX2GhFaVMH7XKwBej0gdq9FzGrT6V"></script>
	<script src="//mapv.baidu.com/build/mapv.min.js"></script>
	<script src="https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.139/dist/mapvgl.min.js"></script>

	<script src="js/jquery.min.js"></script>
	<script src="../data/sensor.js"></script>

	<!--先引用 dropdown 再引用layui-->
	<script src="js/dropdown.js"></script>
	<link rel="stylesheet" href="js/dropdown.css">

	<script src="examples/layui-v2.6.8/layui/layui.js"></script>
	<link rel="stylesheet" href="examples/layui-v2.6.8/layui/css/layui.css">
	<style>
		html,
		body {
			width: 100%;
			height: 100%;
			margin: 0;
			padding: 0;
		}

		#container {
			width: 100%;
			height: 100%;
			margin: 0;
		}
	</style>

</head>
<body>
<div style="position: absolute; z-index: 9999999999;">
	<div class="layui-anim layui-anim-up" id="div_menuContent">
		<table>
			<tr>
				<td>&nbsp;<button type="button" data-type="warning" onclick="showInfo(this)"
								  class="layui-btn layui-btn-danger  layui-btn-sm demolist1">今日报警
				</button>
				</td>
				<td>&nbsp;<button type="button" data-type="warning" onclick="showInfo(this)"
								  class="layui-btn layui-btn-warm  layui-btn-sm demolist2">今日代办
				</button>
				</td>
				<td>&nbsp;<button type="button" data-type="all" onclick="showInfo(this)" id="btn_all_address"
								  class="layui-btn  layui-btn-sm demolist3">设备管理
				</button>
				</td>
				<td>&nbsp;<button type="button" data-type="href" onclick="showInfo(this)"
								  style="background-color: #0088bb;" class="layui-btn  layui-btn-sm demolist4">报表数据
				</button>
				</td>
				<td>&nbsp;<button type="button" data-type="href" onclick="showInfo(this)"
								  class="layui-btn layui-btn-normal  layui-btn-sm demolist5">数据管理
				</button>
				</td>
				<td>
					<button type="button" class="layui-btn layui-btn-sm demolist" data-id="111"
							style="margin-left: 2px;">更多操作
					</button>
				</td>
			</tr>
		</table>
	</div>
</div>
<div style="border-radius:8px; border: 1px solid royalblue;  width: 450px; position: absolute; z-index: 9999; background-color: #0088bb; ">
	<h1 style="display: none; text-align:  center; color: #FFFFFF;" onclick="initBaiduMap()">安装矿列表
		<span style="font-weight: lighter; float: right;  cursor: hand;" onclick="showOrHide(1)"
			  id="span_showOrHide">︾</span>
	</h1>
	<div id="showMines" style="display: none;">
		<table class="layui-table">
			<thead>
			<th>编号</th>
			<th>矿名</th>
			<th>故障/正常</th>
			<th>超限</th>
			<th>操作</th>
			</thead>
			<tbody id="showMines_table_body">

			</tbody>
		</table>
		<span style="color:#fff;">注：点击定位位置和查看详细</span>
		<button class="layui-btn-normal" onclick="manual()">刷新所有</button>
		<img src="../images/ref.png" style="width: 18px; height: 18px;" onclick="manual()"/>
	</div>
</div>
<div id="container"></div>

<script type="text/javascript">
	function showInfo() {

	}
	function getMinDropdownList(){
		let arr=[];
		let resultData = sensorServer.getMinesList({"page": 1, "rows": 10}).data;
		for (let i=0;i<resultData.length;i++){
			let info=new dropdownInfo(resultData[i].id,resultData[i].mineName,resultData[i].serverUrl);
			arr.push(info);
		}
		return arr;
	}
    function dropdownInfo(id,title,url){
		this.id=id;
		this.title=title;
		this.url=url;
	}
	layui.use(['dropdown'], function () {
		var dropdown = layui.dropdown, $ = layui.jquery;
		dropdown.render({
			elem: '.demolist1'
			, data: getMinDropdownList()
			, click: function (data, othis) {
				var elem = $(this.elem)
						, listId = elem.data('id'); //表格列表的预埋数据
				alert(data.url);
				window.open(data.url);
				if (data.id == "showRobotPosition") {
					//显示获取CAD坐标工具
					alert(data.id);
					return;
				}
				if (data.id == "showCADMenu") {
					alert(data.id);
					return;
				}
				if (data.id == "InitializePosition") {
					alert(data.id);
					return;
				}
				if (data.id == "showMaxCAD") {
					window.open(location.href);
					alert(data.id);
					return;
				}
				layer.msg('得到表格列表的 id：' + listId + '，下拉菜单 id：' + data.id);
			}
		});

		let dabanData=getMinDropdownList();
		let dbInfo=new dropdownInfo(0,"集团待办","#");
		dabanData.push(dbInfo);
		dropdown.render({
			elem: '.demolist2'
			, data: dabanData
			, click: function (data, othis) {
				var elem = $(this.elem)
						, listId = elem.data('id'); //表格列表的预埋数据
				alert(data.url);
				window.open(data.url);
				if (data.id == "showRobotPosition") {
					alert(data.id);
					return;
				}
				if (data.id == "showCADMenu") {
					alert(data.id);
					return;
				}
				layer.msg('得到表格列表的 id：' + listId + '，下拉菜单 id：' + data.id);
			}
		});
		dropdown.render({
			elem: '.demolist3'
			, data: getMinDropdownList()
			, click: function (data, othis) {
				var elem = $(this.elem)
						, listId = elem.data('id'); //表格列表的预埋数据
				alert(data.url);
				window.open(data.url);
				if (data.id == "showRobotPosition") {
					alert(data.id);
					return;
				}
				if (data.id == "showCADMenu") {
					alert(data.id);
					return;
				}
				layer.msg('得到表格列表的 id：' + listId + '，下拉菜单 id：' + data.id);
			}
		});
		dropdown.render({
			elem: '.demolist4'
			, data: getMinDropdownList()
			, click: function (data, othis) {
				var elem = $(this.elem)
						, listId = elem.data('id'); //表格列表的预埋数据
				alert(data.url);
				window.open(data.url);
				if (data.id == "showRobotPosition") {
					alert(data.id);
					return;
				}
				if (data.id == "showCADMenu") {
					alert(data.id);
					return;
				}
				layer.msg('得到表格列表的 id：' + listId + '，下拉菜单 id：' + data.id);
			}
		});
		dropdown.render({
			elem: '.demolist5'
			, data: getMinDropdownList()
			, click: function (data, othis) {
				var elem = $(this.elem)
						, listId = elem.data('id'); //表格列表的预埋数据
				alert(data.url);
				window.open(data.url);
				if (data.id == "showRobotPosition") {
					alert(data.id);
					return;
				}
				if (data.id == "showCADMenu") {
					alert(data.id);
					return;
				}
				layer.msg('得到表格列表的 id：' + listId + '，下拉菜单 id：' + data.id);
			}
		});
		dropdown.render({
			elem: '.demolist'
			, data: [{
				title: '查看全部'
				, id: 'showAllInfo'
			}, {
				title: '最大化图纸'
				, id: 'showMaxCAD'
			}
			// , {
			// 	title: '显示/隐藏CAD菜单'
			// 	, id: 'showCADMenu'
			// }, {
			// 	title: '初始化全部坐标'
			// 	, id: 'InitializePosition'
			// }
			]
			, click: function (data, othis) {
				var elem = $(this.elem)
						, listId = elem.data('id'); //表格列表的预埋数据
				if (data.id == "showAllInfo") {
					initBaiduMap();
					return;
				}
				if (data.id == "showCADMenu") {

					return;
				}
				if (data.id == "InitializePosition") {
					return;
				}
				if (data.id == "showMaxCAD") {
					window.open(location.href);
					return;
				}
				layer.msg('得到表格列表的 id：' + listId + '，下拉菜单 id：' + data.id);
			}
		});

	});
</script>

<script type="text/javascript">

	function manual() {
		sensorServer.manualRef({"id": 0});
		layer.msg("已刷新！");
	}

	let showdiv = true;

	function showOrHide() {
		if (showdiv) {
			$("#showMines").hide();
			showdiv = false;
			$("#span_showOrHide").html("＜");
		} else {
			$("#showMines").show();
			showdiv = true;
			$("#span_showOrHide").html("︾");

		}
	}
</script>
<script type="text/javascript">


	//=====================业务代码==================================
	function getMineListPosition() {
		let dataArr = [];

		function DataArrDetails(geometry, color, size, customerId, customerInfo) {
			this.geometry = geometry;
			this.color = color;
			this.size = size;
			this.customerId = customerId;
			this.customerInfo = customerInfo;
		}

		let resultData = sensorServer.getMinesList({"page": 1, "rows": 10}).data;

		/*[{"id": 1, "mineName": "北京测试", "longitude": 117.666, "latitude": 39.666}
			, {"id": 2, "mineName": "天津测试", "longitude": 118.1444, "latitude": 39.666}
			, {"id": 3, "mineName": "天津测试", "longitude": 118.1666, "latitude": 39.666}
			, {"id": 4, "mineName": "天津测试", "longitude": 118.2666, "latitude": 39.666}
			, {"id": 5, "mineName": "天津测试", "longitude": 118.3666, "latitude": 39.666}
			, {"id": 6, "mineName": "天津测试", "longitude": 118.4666, "latitude": 39.666}
			, {"id": 7, "mineName": "天津测试", "longitude": 118.5666, "latitude": 39.666}
			, {"id": 8, "mineName": "天津测试", "longitude": 118.6666, "latitude": 39.666}
			, {"id": 9, "mineName": "天津测试", "longitude": 118.7666, "latitude": 39.666}
			, {"id": 10, "mineName": "天津测试", "longitude": 118.8666, "latitude": 39.666}
		]; */
		for (let i = 0; i < resultData.length; i++) {
			let info = resultData[i];
			let dataDetails = new DataArrDetails();
			dataDetails.size = 8;
			dataDetails.color = "#0fd41e";
			// dataDetails.color = "#1a28d4";
			let errCount = 0;
			let overRunCount = 0;
			let total = 0;
			if (info.lastReportDetails != null) {
				let sensorListData = JSON.parse(info.lastReportDetails);
				total = sensorListData.total;
				let dataList = sensorListData.data;

				for (let j = 0; j < dataList.length; j++) {
					if (dataList[j].deviceConnect != null && dataList[j].ledConnect != null) {
						if (dataList[j].deviceConnect == false || dataList[j].deviceConnect == 0 ||
								dataList[j].ledConnect == false || dataList[j].ledConnect == 0) {
							errCount++;
						}
					}
				}
				if (errCount > 0) {
					dataDetails.color = "#eaea22";
				}
			}

			//=======设置左侧菜单显示
			let showDetailsModel = "<a style='color:#ff802b;text-decoration:underline;' onclick='clickShowDetails(this)'>详情</a>";
			let Tolocate = "&nbsp;<a style='color:#9631ff;text-decoration:underline; background-image: url('')' onclick='' >定位</a>";
			let tbodystr = "<tr data-info='" + JSON.stringify(info) + "'  onclick='clicktr(this)'>" +
					"<td>" + info.id + "</td>" +
					"<td>" + info.mineName + "</td>" +
					"<td>" + errCount + "/" + total + "</td>" +
					"<td>" + 0 + "</td>" +
					"<td>" + showDetailsModel + Tolocate + "</td>" +
					"</tr>"
			$("#showMines_table_body").append(tbodystr);
			//=======设置左侧菜单显示
			dataDetails.geometry = {
				type: 'point',
				coordinates: [info.longitude, info.latitude]
			}
			dataDetails.customerId = info.id;
			dataDetails.customerInfo = info;
			dataArr.push(dataDetails);

			//
		}
		return dataArr;
	}

	function clickShowDetails(e) {
		let info = JSON.parse(e.parentNode.parentNode.getAttribute('data-info'));
		openWindowShowInfo(info.mineName, info.id);
	}

	function clicktr(obj) {
		debugger;
		let trInfo = JSON.parse(obj.getAttribute("data-info"));
		//map.clearOverlays();
		var new_point = new BMapGL.Point(trInfo.longitude, trInfo.latitude);
		var marker = new BMapGL.Marker(new_point);  // 创建标注
		map.addOverlay(marker);              // 将标注添加到地图中
		map.panTo(new_point);

	}

	//打开窗口显示详细信息
	function openWindowShowInfo(titleText, id) {
		window.open("http://led.longder.com/mine_cuncaota_map/");
		return;
		let titleInfo = "详细信息";
		if (titleText != "") {
			titleInfo = titleText;
		}
		let skinStr = 'layui-layer-lan';
		let url = "mine_details.html?id=" + id;  //"http://localhost:9001/map_warningList.html";
		layer.open({
			skin: skinStr, // 'layui-layer-lan', // skin: 'layui-layer-demo', //样式类名
			type: 2
			, title: titleInfo //不显示标题栏
			, closeBtn: 1
			, maxmin: true
			, fixed: false
			, area: ['1100px', '600px']
			, shade: 0.2
			, id: 'LAY_layuipro' //设定一个id，防止重复弹出
			//,btn: '关闭全部'
			, btnAlign: 'c'
			, move: true
			, moveType: 0 //拖拽模式，0或者1
			, resize: true
			, content: url //'<div style="padding: 50px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;">你知道吗？亲！<br>layer ≠ layui<br><br>layer只是作为Layui的一个弹层模块，由于其用户基数较大，所以常常会有人以为layui是layerui<br><br>layer虽然已被 Layui 收编为内置的弹层模块，但仍然会作为一个独立组件全力维护、升级。<br><br>我们此后的征途是星辰大海 ^_^</div>'
		});
	}

	//=====================业务代码==================================
</script>
<script type="text/javascript">
	var map = new BMapGL.Map("container");
	$(function () {
		map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
		// 创建地图实例
		var point = new BMapGL.Point(116.404, 39.915);

		var view = new mapvgl.View({
			map: map
		});
		var cities = [
			'北京',
			'石家庄',
			'上海',
			'重庆',
			'太原',
			'呼和浩特'
		];
		//var colors = ['#f00', '#ff0', '#0ff', '#00f'];
		var data = null;
		//     cities.map((city, index) => {
		//     var cityCenter = mapv.utilCityCenter.getCenterByCityName(city);
		//     return {
		//         geometry: {
		//             type: 'Point',
		//             coordinates: [cityCenter.lng, cityCenter.lat]
		//         },
		//         color: colors[index % 4],
		//         // 圆的半径
		//         size: 8
		//     };
		// });
		data = getMineListPosition();

		for (let i = 0; i < data.length; i++) {
			let count =Math.round(Math.random()*30+5);
			createText(
					data[i].customerInfo.id,
					data[i].customerInfo.mineName,//+"/"+count+"套",
					data[i].geometry.coordinates[0],
					data[i].geometry.coordinates[1]
			);
		}

		// var simpleLayer = new mapvgl.CircleLayer({
		//     // 默认类型，绘制简单圆
		//     type: 'simple',
		//     enablePicked: true,
		//     selectedColor: '#f0f', // 选中项颜色
		//     autoSelect: true, // 根据鼠标位置来自动设置选中项
		//     onClick: (e) => { // 点击事件
		//         console.log(e);
		//         debugger;
		//         alert('点击');
		//     }
		// });

		// view.addLayer(simpleLayer);
		// simpleLayer.setData(data.slice(0, 2));

		//----------------------------------------------
		var waveLayer = new mapvgl.CircleLayer({
			// 绘制带波纹扩散的圆
			type: 'wave',
			// 扩散半径，支持直接设置和回调两种形式
			radius: 20,
			// 周期影响扩散速度，越小越快
			duration: 0.5,
			selectedColor: '#eaea22', // 选中项颜色
			// 拖尾影响波纹数，越大越多
			trail: 1,
			autoSelect: true, // 根据鼠标位置来自动设置选中项
			onClick: (e) => { // 点击事件
				console.log(e);
				alert('点击11');
			}
		});
		view.addLayer(waveLayer);
		waveLayer.setData(data);

		for (let i = 0; i < waveLayer.data.length; i++) {
			let info = waveLayer.data[i];
			var point = new BMapGL.Point(info.geometry.coordinates[0], info.geometry.coordinates[1]);
			point.name = 'p_' + info.customerId;
			var marker1 = new BMapGL.Marker(point);         // 将标注添加到地图中
			marker1.name = 'm_' + info.customerId;
			marker1.addEventListener("click", clickPoint);
			map.addOverlay(marker1);
		}


		function clickPoint(e) {
			openWindowShowInfo("", e.target.name.replace("m_", ""));
		}

		//----------------------------------------------
		// var bubbleLayer = new mapvgl.CircleLayer({
		//     // 绘制带泡泡的圆
		//     type: 'bubble',
		//     // 扩散半径，支持直接设置和回调两种形式，size为点的大小
		//     radius(size) {
		//         return 2 * size;
		//     },
		//     // 扩散时间
		//     duration: 1,
		//     // 渐隐时间
		//     trail: 1
		// });
		// view.addLayer(bubbleLayer);
		// bubbleLayer.setData(data.slice(2, 4));

		//----------------------------------------------
		// var breathLayer = new mapvgl.CircleLayer({
		//     // 绘制带泡泡的圆
		//     type: 'breath',
		//     // 扩散半径，支持直接设置和回调两种形式，size为点的大小
		//     radius(size) {
		//         return size;
		//     },
		//     // 显示时间
		//     duration: 3,
		//     // 渐隐时间
		//     trail: 3
		// });
		// view.addLayer(breathLayer);
		// breathLayer.setData(data.slice(6));

		// 创建点坐标

		var marker = new BMapGL.Marker(point);        // 创建点标注
		//map.centerAndZoom(point, 15);
		map.addOverlay(marker);                     // 将标注添加到地图中
		marker.addEventListener("click", function (e) {
			alert("您点击了标注");
		});
		map.centerAndZoom(point, 25);
	})


	function createText(id, textInfo, lng, lat) {
		var opts = {
			position: new BMapGL.Point(lng, lat), // 指定文本标注所在的地理位置
			offset: new BMapGL.Size(15, -10) // 设置文本偏移量
		};
		// 创建文本标注对象
		//var label = new BMapGL.Label('欢迎使用百度地图JSAPI GL版本', opts);
		var label = new BMapGL.Label(textInfo, opts);
		label.setTitle(id + '_' + textInfo);
		// 自定义文本标注样式
		label.setStyle({
			color: 'green',
			borderRadius: '5px',
			borderColor: '#ccc',
			padding: '5px',
			fontSize: '12px',
			height: '15px',
			lineHeight: '15px',
			fontFamily: '微软雅黑'
		});
		label.addEventListener('click', function (e) {
			openWindowShowInfo(textInfo, e.target.getTitle().split('_')[0]);
		});
		map.addOverlay(label);
	}

	function initBaiduMap() {
		var point = new BMapGL.Point(105.291, 37.094);
		map.centerAndZoom(point, 5);
		map.enableScrollWheelZoom(true);
		map.addEventListener('click', function (e) {
			var point = new BMapGL.Point(e.latlng.lng, e.latlng.lat);
			var gc = new BMapGL.Geocoder();
			gc.getLocation(point, function (rs) {
				var opts = {
					title: '行政区划归属',
					width: 220,
					height: 92
				};
				var infoStr = '<div>省：' + rs.addressComponents.province + '</div>'
						+ '<div>市：' + rs.addressComponents.city + '</div>'
						+ '<div>区：' + rs.addressComponents.district + '</div>';
				var infoWindow = new BMapGL.InfoWindow(infoStr, opts);
				map.openInfoWindow(infoWindow, point);
			});
		});
	}
</script>
</body>
</html>
